<template>
  <div class="#Treetable">
    <el-table
    :data="tableData"
    style="width: 100%"
    row-key="id"
    @selection-change="handleSelectionChange"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      type="selection"
      align='center'
      width="55">
    </el-table-column>
    <el-table-column
      v-for="item in headData" :key="item.prop"
      :prop="item.prop"
      :label="item.label"
      :width="item.width?item.width:'inhert'">
      <template slot-scope="{ $index, row }">
          <div v-if="item.slot">
            <slot :name="item.prop" v-bind:row="row"></slot>
          </div>
          <span v-else>
            {{row[item.prop] | noEmptyObj}}
          </span>
        </template>
    </el-table-column>
    <el-table-column
     fixed="right"
     align="center"
     v-if="operation"
     label="操作"
     width="140">
      <template slot-scope="scope">
          <slot
          name="operation"
          v-bind:scope="scope"
          ></slot>
      </template>
         </el-table-column>
  </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  filters:{
    noEmptyObj(val){
      if(typeof val =="object"&&Object.keys(val).length==0){
        return ''
      }else{
        return val
      }
    }
  },
  methods:{
    handleSelectionChange(val){
      console.log(val);
    }
  },
  props:{
    tableData:{
      type:Array,
      default:()=>{
        return []
      }
    },
    headData:{
      type:Array,
      default:()=>{
        return []
      }
    },
    operation:{
      type:Boolean,
      default:()=>{
        return true
      }
    }
  }
}
</script>

<style lang="less">
  
    .el-button+.el-button{
      margin-left: 0!important;
    }
  
</style>